<!-- 项目进场-标室日程 ->标室席位总览 -->
<template>
  <div class="layout-wrapper">
    <div class="layout-header ui-mt10">
      <div class="layout-left ui-ml10">
        <div class="item">
          <el-button icon="el-icon-circle-plus-outline" type="primary" size="medium" @click="addLeave()">
            新增请假
          </el-button>
        </div>
      </div>
      <div class="layout-right ui-mr10">
        <el-form :inline="true" :model="searchForm" size="small">
          <el-form-item label="选择月份" prop="date">
            <el-date-picker
              v-model="searchForm.date"
              class="ui-w200"
              type="month"
              value-format="yyyy-MM"
              placeholder="选择月"
              :clearable="false"
              @change="changeDate"
            />
          </el-form-item>
        </el-form>
      </div>
    </div>
    <div class="layout-header ui-mt10 ui-mr10">
      <div class="layout-right">
        <div class="legend">
          <span class="full-legend">在岗</span>
          <span class="half-legend">请假</span>
          <span class="not-legend">休息日</span>
        </div>
      </div>
    </div>
    <div class="layout-body">
      <component
        :is="this.componentsName"
        :data="dataList"
        :year="this.formData.date"
        :loading="tableLoading"
        :form="this.formData"
        @change="changeComponent"
        @fatherMethod="fatherMethod"
      />
    </div>
    <div class="layout-footer" />
    <!-- 新增请假弹框 -->
    <el-dialog
      width="650px"
      :close-on-click-modal="false"
      draggable
      :show-close="false"
      custom-class="adjustRoomDialog"
      :title="childShow == 'child' ? '请假详情' : '新增请假'"
      :visible.sync="adjustRoomDialog"
    >
      <div v-loading="loadingAdjust" element-loading-text="数据加载中" element-loading-spinner="icon-loading">
        <el-form ref="leaveForm" :model="leaveForm" :rules="leaveRules" label-width="auto">
          <div class="form-col2">
            <el-form-item label="请假人姓名" prop="userId">
              <div class="option-item">
                <el-select v-model="leaveForm.userId" filterable :disabled="childShow == 'child' ? true : false">
                  <!-- @change="typeChange" -->
                  <el-option v-for="item in leaveList[0]" :key="item.label" :value="item.value" :label="item.label" />
                </el-select>
              </div>
            </el-form-item>
            <el-col :span="24">
              <el-form-item label="请假时段" prop="date">
                <el-date-picker
                  v-model="leaveForm.date"
                  :disabled="childShow == 'child' ? true : false"
                  class="ui-w378"
                  :picker-options="{
                    disabledDate(time) {
                      let data = new Date();
                      return time.getTime() < Date.now() - 3600 * 1000 * 24;
                    },
                    selectableRange: startTimeRange
                  }"
                  value-format="yyyy-MM-dd HH:mm:ss"
                  format="yyyy-MM-dd HH:mm:ss"
                  type="datetimerange"
                  range-separator="至"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                  @change="queryTaskBook"
                />
              </el-form-item>
            </el-col>
          </div>
          <el-form-item label="请假原因" prop="reason">
            <el-input
              v-model="leaveForm.reason"
              :disabled="childShow == 'child' ? true : false"
              type="textarea"
              :rows="2"
              placeholder="请输入"
              maxlength="200"
              show-word-limit
            />
          </el-form-item>
        </el-form>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button v-if="childShow == ''" :loading="btnLoading" type="primary" @click="SubmitLeave('leaveForm')">
          确定
        </el-button>
        <el-button @click="cancel('leaveForm')">取消</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
  import city from "./RoomDate/city-table.vue";
  import YearCalendar from "vue-material-year-calendar";
  import { OnCalendar, newLeave } from "../../api/api";
  export default {
    // import引入的组件需要注入到对象中才能使用
    components: {
      city,
      // setting,
      YearCalendar
    },
    // 引入混淆
    mixins: [],
    // 引入组件
    props: [],
    data() {
      // 这里存放数据
      return {
        // 权限province/city
        // auth: "city",
        calendarYear: new Date().getFullYear(), // 转换为数字
        fullYear: new Date(), // 转换为数字
        tableLoading: false,
        btnLoading: false,
        show: false,
        adjustRoomButton: true,
        adjustRoomDialog: false,
        loadingAdjust: false,
        dataList: [],
        date: [],
        timeStart: "",
        startTimeRange: "",
        childShow: "",
        leaveList: [],
        leaveForm: {
          leaveAm: "",
          leavePm: "",
          userId: "",
          reason: "",
          leaveTime: "",
          leaveStartTime: "",
          leaveEndTime: "",
          date: ""
        },
        formData: {
          date: this.$moment(new Date()).format("YYYY-MM"),
          region: "",
          area: [],
          type: ""
        },
        searchForm: {
          date: this.$moment(new Date()).format("YYYY-MM"),
          region: "",
          area: "",
          industry: ["All"],
          orderTaskTypeEnumList: "All",
          type: "",
          roomRemote: "",
          search: ""
        },
        leaveRules: {
          userId: [{ required: true, message: "请选择请假人名称", trigger: "change" }],
          date: [{ required: true, message: "请选择请假时段", trigger: "change" }],
          reason: [
            { required: true, message: "请输入请假原因", trigger: "change" },
            {
              min: 1,
              max: 200,
              message: "长度在 1 到 200 个字符",
              trigger: "blur"
            }
          ]
        }
      };
    },
    // 监听属性 类似于data概念
    computed: {
      componentsName() {
        return "city";
      }
    },
    watch: {
      "leaveForm.publishTime": {
        handler(newValue) {
          if (newValue && this.dateFormat(new Date())) {
            if (this.dateFormat(new Date()).split(" ")[0] === newValue.split(" ")[0]) {
              this.selectTimeRange = `${this.dateFormat(new Date()).split(" ")[1]} - 23:59:59`;
            } else {
              this.selectTimeRange = "00:00:00 - 23:59:59";
            }
          }
        }
      }
    },
    // 生命周期 - 创建完成（可以访问当前this实例）
    created() {
      this.leaveListFN();
      this.getNextHour();
    },
    // 生命周期 - 挂载完成（可以访问DOM元素）
    mounted() {},
    // 方法集合
    methods: {
      fatherMethod(childFrom) {
        this.childShow = "child";
        this.leaveForm.userId = childFrom.input;
        this.leaveForm.date = childFrom.time;
        this.leaveForm.reason = childFrom.adjustReason;
        this.adjustRoomDialog = true;
        console.log(this.adjustRoomDialog, "==========");
      },
      dateFormat(date) {
        let format = "yyyy-MM-dd hh:mm:ss";
        if (date !== "Invalid Date") {
          const o = {
            "M+": date.getMonth() + 1, // month
            "d+": date.getDate(), // day
            "h+": date.getHours(), // hour
            "m+": date.getMinutes(), // minute
            "s+": date.getSeconds(), // second
            "q+": Math.floor((date.getMonth() + 3) / 3), // quarter
            S: date.getMilliseconds() // millisecond
          };
          if (/(y+)/.test(format)) {
            format = format.replace(RegExp.$1, `${date.getFullYear()}`.substr(4 - RegExp.$1.length));
          }
          for (const k in o) {
            if (new RegExp(`(${k})`).test(format)) {
              format = format.replace(RegExp.$1, RegExp.$1.length === 1 ? o[k] : `00${o[k]}`.substr(`${o[k]}`.length));
            }
          }
          return format;
        }
        return "";
      },
      getNextHour() {
        const mydate = new Date();
        // let y =mydate.getFullYear(); //获取完整的年份(4位,1970-????)
        // let M =mydate.getMonth()+1; //获取当前月份(0-11,0代表1月)
        // let d =mydate.getDate(); //获取当前日(1-31)
        const h = mydate.getHours(); // 获取当前小时数(0-23)
        const m = mydate.getMinutes(); // 获取当前分钟数(0-59)
        const s = mydate.getSeconds(); // 获取当前秒数(0-59)
        this.timeStart = `${h}:${m}:${s}`;
      },
      queryTaskBook(e) {
        this.leaveForm.date = e;
      },
      addLeave() {
        this.childShow = "";
        this.adjustRoomDialog = true;
      },
      cancel(formName) {
        this.$refs[formName].resetFields();
        this.adjustRoomDialog = false;
      },
      timeStampChange(time) {
        let p = "";
        const date = new Date(time); // 获取时间戳
        let y = date.getFullYear();
        let m = date.getMonth() + 1;
        if (m == 12) {
          m = 1;
          y = y + 1;
        } else {
          m = m + 1;
        }
        m = m < 10 ? `0${m}` : m;
        p = `${y}-${m}`;
        return p;
      },
      changeDate(e) {
        this.searchForm.date = e;
        this.tableLoading = true;
        this.dataList = [];
        this.leaveListFN();
      },
      SubmitLeave(formName) {
        // const this = this;
        if (this.leaveForm.userId != "" && this.leaveForm.reason != "" && this.leaveForm.date != "") {
          this.btnLoading = true;
        }
        this.$refs[formName].validate((valid) => {
          if (valid) {
            this.newLeaveFn();
          } else {
            console.log("error submit!!");
            return false;
          }
        });
      },
      // 列表数据
      async leaveListFN() {
        this.dataList = [];
        this.tableLoading = true;
        const params = {
          startDate: `${this.searchForm.date}-01 00:00:00`,
          endDate: `${this.timeStampChange(this.searchForm.date)}-01 00:00:00`
          // userId: sessionStorage.getItem("userId"),
        };
        try {
          const res = await OnCalendar(params);
          if (res.success) {
            this.dataList = res.data;
            const obj = res.data.map((item) => ({
              label: item.userName,
              value: item.userId
            }));
            this.leaveList.push(obj);
            this.tableLoading = false;
          } else {
            this.$message({
              type: "warning",
              message: res.message,
              single: true
            });
          }
        } catch (error) {
          console.error(error);
          this.$message({
            type: "warning",
            message: "获取数据失败，稍后再试"
          });
        }
      },
      // 新增请假
      async newLeaveFn() {
        const params = {
          userId: this.leaveForm.userId,
          reason: this.leaveForm.reason,
          leaveStartTime: this.leaveForm.date[0],
          leaveEndTime: this.leaveForm.date[1]
        };
        try {
          const res = await newLeave(params);
          if (res.success) {
            this.$message({
              type: "success",
              message: "新增成功",
              single: true
            });
            this.btnLoading = false;
            this.adjustRoomDialog = false;
            this.$refs.leaveForm.resetFields();
            this.leaveListFN();
          } else {
            this.$message({
              type: "warning",
              message: res.message,
              single: true
            });
          }
        } catch (error) {
          console.error(error);
          this.$message({
            type: "warning",
            message: "获取数据失败，稍后再试"
          });
        }
      },
      changeComponent(params) {
        const { id } = params.row;
        const area = params.row.areaList;
        const n = area.length;
        const newArr = [];
        for (let i = 0; i < n; i++) {
          newArr.push([id, area[i]]);
        }
        this.formData.area = newArr;
        this.tableLoading = true;
        this.dataList = [];
        this.leaveListFN();
      },
      showSetting() {
        this.show = true;
      }
    }
  };
</script>
<style lang="scss" scoped>
  $siteVerify: #f466c1 !default; // 场地待审
  $verify: #ff4800 !default; // 交易待审
  $prepare: #f7c069 !default; // 备用
  $full: #2f93ff !default; // 约满#00dbe4
  $half-full: #6dd400 !default; // 约满#00dbe4
  $not: #f7c069 !default; //不可用
  $rest: #efefef !default; // 休息
  $rest-border: #dedede !default; // 休息
  .info-warning {
    display: inline-block;
    i {
      color: rgb(230, 173, 0);
      font-size: 16px;
      line-height: 1;
    }
  }
  .legend {
    padding-bottom: 10px;
    span {
      position: relative;
      margin-left: 10px;
      &::before {
        position: relative;
        top: 2px;
        display: inline-block;
        content: "";
        width: 20px;
        height: 12px;
        border-radius: 2px;
        margin-right: 3px;
        border: 1px solid #333;
      }
    }
    .siteVerify-legend::before {
      background-color: $siteVerify;
      border-color: $siteVerify;
    }
    .verify-legend::before {
      background-color: $verify;
      border-color: $verify;
    }
    .prepare-legend::before {
      background-color: $prepare;
      border-color: $prepare;
    }
    .free-legend::before {
      background-color: #fff;
      border-color: $line;
    }
    .full-legend::before {
      background-color: $full;
      border-color: $full;
    }
    .half-legend::before {
      border-color: $not;
      background: $not;
    }
    .not-legend::before {
      background-color: $rest;
      border-color: $rest-border;
      /*设置背景渐变*/
      background: linear-gradient(
        -45deg,
        #e1e1e1 15%,
        #fff 0,
        #fff 25%,
        #fff 0,
        #fff 50%,
        #e1e1e1 0,
        #e1e1e1 65%,
        #fff 0,
        #fff 75%,
        #fff 0
      );
      /*线性渐变的宽度*/
      background-size: 5px 5px;
    }
    .rest-legend::before {
      background-color: $rest;
      border-color: $rest-border;
    }
  }
  .room-table {
    width: 100%;
    height: 100%;
    ::v-deep .el-table--border {
      border: none;
    }
    ::v-deep .el-table--border:before,
    ::v-deep .el-table--border:after {
      display: none;
    }
    ::v-deep .el-table {
      th {
        padding: 5px 0;
        background-color: rgba(47, 147, 255, 0.1);
        border-color: transparent;
      }
      td {
        padding: 0;
        &.col-prop {
          padding-left: 1px;
          padding-bottom: 1px;
          border-right: none;
          border-bottom: none;
          .cell {
            padding: 16px 0;
          }
        }
      }
      .el-table__body {
        td {
          border-bottom: 1px solid #dedede;
          border-right: 1px solid #dedede;
          &:hover {
            opacity: 0.7;
          }
        }
        .col-prop {
          border-bottom: none;
          border-right: none;
          &:hover {
            opacity: 1;
          }
        }
        tr.hover-row {
          td {
            background-color: transparent;
          }
        }
        tr:nth-child(2n) {
          .col-prop {
            background-color: #fff;
          }
        }
        tr:nth-child(2n + 1) {
        }
        .cell {
          line-height: 0px !important;
          padding: 0px;
        }
        td {
          z-index: 0;
        }
        .col-prop:first-child {
          padding-left: 10px;
        }
        .last {
          padding-left: 0;
          border-right: 1px solid #d2d2d2;
        }
      }
    }
  }
  .adjustRoomTable {
    tr:hover .expand-table tr {
      background-color: transparent;
    }
    .expand-table {
      border: 1px solid #dedede;
      background-color: #f2f2f2;
      position: relative;
      top: -5px;
      border-radius: 0 0 2px 2px;
      padding: 0 10px;
      table {
        border-spacing: 0 !important;
      }
      thead tr,
      tbody tr,
      tr:hover {
        background-color: transparent;
      }
    }
  }
  .adjustRoomNoticeDialog {
    .noticeContent {
      li {
        list-style-position: inside;
        list-style-type: decimal;
        line-height: 26px;
        font-size: 14px;
      }
      p {
        line-height: 26px;
      }
    }
    .el-dialog__footer {
      padding: 10px 20px 20px;
      text-align: right;
      -webkit-box-sizing: border-box;
      box-sizing: border-box;
      font-size: 0;
      .dialog-footer .foot-left {
        float: left;
        display: inline;
      }
      .dialog-footer .foot-right {
        float: right;
        display: inline;
      }
      .dialog-footer:before,
      .dialog-footer:after {
        content: "";
        display: table;
        height: 0;
      }
      .dialog-footer::after {
        clear: both;
      }
    }
  }
  .addReserveRoomDialog .reserveRoomList {
    *zoom: 1;
    max-height: 500px;
    overflow: auto;
    padding-top: 8px;
    .addRoom {
      text-align: center;
      cursor: pointer;
      i {
        font-size: 46px;
        display: block;
        color: #888;
        margin: 25px 0 10px 0;
      }
    }
    li {
      float: left;
      display: inline-block;
      font-size: 14px;
      padding: 20px;
      width: 340px;
      height: 130px;
      background-color: #fff;
      margin: 0 12px 20px 8px;
      border-radius: 2px;
      box-shadow: 2px 2px 8px rgba(0, 51, 140, 0.2);
      .title::before {
        position: relative;
        top: 2px;
        display: inline-block;
        width: 3px;
        height: 14px;
        margin-right: 5px;
        content: "";
        background-color: #007aff;
      }
      .option {
        text-align: right;
      }
      .item {
        height: 30px;
        line-height: 30px;
      }
    }
  }
  .addReserveRoomDialog .reserveRoomList:before,
  .addReserveRoomDialog .reserveRoomList:after {
    content: "";
    display: table;
    height: 0;
  }
</style>
<style lang="scss">
  .your_customized_wrapper_class {
    // background-color: red !important;
    // border: 1px solid #000;
  }
  .addReserveDialog .radio-block {
    .el-radio {
      position: relative;
      width: 115px;
      height: 30px;
      background-color: #06c296;
      text-align: center;
      line-height: 30px;
      color: #fff;
      margin-bottom: 20px;
    }
    .el-radio__input {
      display: none;
      position: absolute;
      bottom: 10px;
      right: 10px;
    }
    .el-radio .el-radio__inner {
      border: none;
      z-index: 1;
      background: #06c296;
      box-shadow: none;
    }
    .el-radio__label {
      padding: 0;
      max-width: 80%;
      display: inline-block;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .el-radio.is-checked .el-radio__input {
      display: block;
    }
    .el-radio .el-radio__inner::before {
      content: "\E770";
      font-family: "iconfont" !important;
      font-size: 14px;
      font-style: normal;
      vertical-align: baseline;
      display: inline-block;
      speak: none;
      font-style: normal;
      font-weight: normal;
      font-variant: normal;
      text-transform: none;
    }
    .el-radio .el-radio__inner::after {
      display: none;
    }
  }
  .addReserveDialog .radio-block.scroll-auto {
    max-height: 200px;
    overflow: auto;
  }
  .settingRoomDialog .reserveCalendar {
    box-shadow: 0 0 1px #444;
    .vue-calendar__container {
      box-shadow: none;
      .p-0 {
        display: none;
      }
      .container__year {
        height: 30px;
        font-size: 14px;
      }
      .container__months {
        padding: 0;
        height: 295px;
        overflow-y: auto;
        overflow-x: hidden;
        box-sizing: border-box;
      }
      .container__months .container__month {
        flex-wrap: wrap;
        justify-content: space-between;
        width: 220px;
        margin: 1px 0 0 1px;
        padding: 0;
      }
      .calendar:hover {
        transform: none;
      }
      .container__months .container__month .activeClass {
        background-color: #5db3d4;
        color: #fff;
      }
    }
    // 禁用日期样式
    .disabled-date {
      // background-color: red !important;
      background-color: #efefef !important;
      color: #999 !important;
      cursor: not-allowed !important;
      pointer-events: none !important;
    }
    // 禁用日期样式
    .disabled-date-day {
      cursor: not-allowed !important;
    }
  }
  .openingRoomAvailableTime,
  .evaluationRoomAvailableTime {
    li {
      line-height: 34px;
    }
  }
</style>
